<template>
  <!-- 筑功者列表 -->
  <div class="zgz-rec">
    <div class="project-recommendation">
            <!-- <p class="title_p" v-if="  this.$store.state.userinfo.type==1">推荐筑功者</p> -->
            <p class="title_p">筑功者</p>            
            <router-link to="/zgz">
                <span>更多</span>
                <svg class="icon icon-po" aria-hidden="true" >
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
            </router-link>
        </div>
        <!-- 筑功者公司及个人列表 -->
        <!-- 公司列表 -->
      <div class="company-list">
            <!-- 每条数据 -->
          <router-link class="company-list-item" v-bind:to="item.url+item.id" v-for="(item,index) in Zgzs" :key="index">
              <dl>
                  <dt class="company-dt">
                      <img :src="item.headportrait" class="company-dt-img company-img" />
                  </dt>
                  <dd class="company-dd">
                      <p class="company-dd-p1">
                        <span>{{item.name}}</span>
                        <span class="company-p1-right" v-if="item.type==2">企业</span>
                        <span class="company-p1-right company-dd-person" v-else>个人</span>
                      </p>
                      <p class="company-dd-p2">
                          <span v-for="(item,index) in item.Arr_tags" :key="index">{{item}}</span>
                      </p>
                      <p class="company-dd-p3">
                        <span>浏览量</span>
                        <span>{{item.hits}}</span>
                        <span class="p3-fenge"></span>
                        <span class="fenge-right">好评率</span>
                        <span>{{item.praiseRate}}%</span>
                    </p>
                    <p class="company-dd-p4">
                        <span class="company-p4-left">服务</span>
                        <span class="company-p4-right">{{item.introduction}}</span>
                    </p>
                  </dd>
              </dl>
          </router-link>
      </div>
    </div>    
</template>

<script>
import { GetZgz } from "@/api/index";
export default {
  data() {
    return {
      Zgzs: []
    };
  },
  created() {
    this._GetZgz();
  },
  methods: {
    _GetZgz() {
      GetZgz().then(res => {
        if (res.StatusCode === 200) {
          this.Zgzs = res.Data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 推荐项目 */
.project-recommendation {
  height: 50px;
  overflow: hidden;
  border-top: 10px solid #f4f4f4;
  padding: 0 12px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
   .title_p{
    font-weight: bold;
  }
  > :first-child {
    font-size: 16px;
    color: #282828;
  }
  > :last-child {
    font-size: 14px;
    color: #999999;
    > span {
      float: left;
      display: block;
    }
    > .icon {
      display: block;
      float: left;
      margin-top: 3px;
    }
  }
}
@media screen and (max-width: 361px) {
  .company-dd-p2 > span {
    margin-right: 5px !important;
  }
  .company-dd-p3 > span {
    margin-right: 3px !important;
  }
  .fenge-right {
    margin-left: 10px !important;
  }
}
.company-list {
  position: relative;
}

.company-list-item {
  width: 100%;
  padding-bottom: 16.3px;
  display: block;
  border-bottom: 10px solid rgb(238, 238, 238);
}
.company-list-item > dl {
  overflow: hidden;
}
.company-dt {
  width: 74.6px;
  height: 74.6px;
  background: #ff6900;
  // overflow: hidden;
  float: left;
  margin-top: 16.3px;
  margin-left: 12px;
  display: flex;
  align-items: center;
}
/* 保持图片不失真 */
.company-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;

  // margin-top:20.65px;
  // margin-left:5.15px;
}
.person-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.company-dd {
  float: left;
  margin-left: 11.6px;
  margin-top: 16.3px;
}
.company-dd-p1 {
  font-size: 18px;
  color: #333333;
  margin-bottom: 11.66px;
  overflow: hidden;
}
.company-dd-p1 > span {
  display: block;
  float: left;
}
.company-p1-right {
  display: inline-block;
  font-size: 12px;
  float: left;
  color: #ffffff;
  background: #fd4f00;
  padding: 0px 6px;
  margin-left: 7px;
  margin-top: 3px;
}
.person-fenge {
  width: 0;
  height: 15px;
  border: 1px solid rgb(40, 40, 40);
  display: inline-block;
  margin-left: 13px;
  margin-right: 13px;
}
.company-dd-person {
  background: rgb(56, 135, 254) !important;
  margin-left: 7px;
}
.company-dd-p2 {
  margin-bottom: 12px;
  height: 28.666px;
}
.company-dd-p2 > span {
  display: block;
  float: left;
  color: #fd4f00;
  font-size: 14px;
  margin-right: 10px;
  padding: 2px 3px;
  border: 1px solid #fd4f00;
}
.company-p2-last {
  margin-right: 0px !important;
}
.company-dd-p3 {
  font-size: 12px;
  color: #999999;
  height: 11.3px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
}
.company-dd-p3 > span {
  float: left;
  color: #666666;
  display: block;
  margin-right: 4px;
  line-height: 9.81px;
  font-size: 12px;
}
.p3-fenge {
  display: block;
  float: left;
  width: 0px;
  height: 8px;
  border: 1px solid #999999;
  margin-left: 10px !important;
  margin-right: 15px !important;
}

.company-dd-p4 {
  overflow: hidden;
  margin-bottom: 14px;
}
.company-p4-left {
  display: block;
  float: left;
  font-size: 12px;
  color: #fff;
  padding: 0px 6px;
  background: rgb(255, 186, 0);
}
.company-p4-right {
  display: block;
  float: left;
  font-size: 12px;
  color: rgb(102, 102, 102);
  margin-left: 6.66px;
  line-height: 18px;
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3.15px;
}

</style>
